<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false" %>
<%@ page isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>添加管理员</title>

    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/main.css" media="all">
    <script src="${pageContext.request.contextPath}/lib/layui/layui.js" charset="utf-8"></script>
    <script src="${pageContext.request.contextPath}/js/x-layui.js" charset="utf-8"></script>

    <script>
        layui.use(['form','layer'], function(){
            $ = layui.jquery;
        });
    </script>

    <style type="text/css">
        .my-marginright{
            margin-right: 40px;
        }
    </style>
</head>

<body>
<div class="x-body">
    <form class="layui-form my-marginright" id="adminadd"
          action="${pageContext.request.contextPath}/admin/add"  method="post" enctype="multipart/form-data">

        <div class="layui-form-item">
            <label for="username" class="layui-form-label"><span class="x-red">* </span>用户名</label>
            <div class="layui-input-block">
                <input type="text" id="username" name="username" required lay-verify="required"
                       autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label for="L_pass" class="layui-form-label">
                <span class="x-red">* </span>密码
            </label>
            <div class="layui-input-block">
                <input type="password" id="L_pass" name="password" required lay-verify="pass"
                       autocomplete="off" class="layui-input" value="">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="L_repass" class="layui-form-label">
                <span class="x-red">* </span>确认密码
            </label>
            <div class="layui-input-block">
                <input type="password" id="L_repass" required lay-verify="repass"
                       autocomplete="off" class="layui-input">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="x-red">*</span>角色
            </label>
            <div class="layui-input-inline">
                <select name="roleId">
                    <c:forEach items="${roles}" var="role" varStatus="status">
                        <option value="${role.id}">${role.name}</option>
                    </c:forEach>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="x-red">* </span>头像
            </label>
            <input type="file" id="previewImg" name="headerFile">
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="radio" name="state" value="0" title="启用" checked="checked">
                <div class="layui-unselect layui-form-radio layui-form-radioed"><i class="layui-anim layui-icon layui-anim-scaleSpring"></i>
                    <div>启用</div>
                </div>
                <input type="radio" name="state" value="1" title="禁用">
                <div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i>
                    <div>禁用</div>
                </div>
            </div>
        </div>

        <br>
        <%--  日期 --%>
        <%--        <input type="date" name="birth">--%>
        <%--        <input type="time" name="birth">--%>
        <%--        <input type="datetime-local" name="birth">--%>
        <br>

        <div class="layui-form-item">
            <label for="L_repass" class="layui-form-label">
            </label>
            <button onclick="checkPassword(event)"  class="layui-btn " lay-filter="add" lay-submit="" type="submit">
                增加
            </button>
        </div>
    </form>
</div>

<script>
    function checkPassword(event) {
        let psw = document.getElementById('L_pass').value;
        let repwd = document.getElementById('L_repass').value;
        if(psw !== repwd) {
            alert('两次密码不同，请重新确认!!!!')
            event.preventDefault()
        }
    }
</script>

</body>
</html>